<template>
  <div>
    <h4 class="boardName">设备类型<a-icon type="right" /></h4>
    <div class="lightBox newquipmentBox" style="padding: 10px;height:308px">
      <div v-if="MacTypeCountData.length > 0">
        <div
          class="progressdivone"
          v-for="(item, index) in MacTypeCountData"
          :key="index"
        >
          <span class="progressOnename">{{ item.macType }}</span>
          <a-progress
            strokeColor="#1991EB"
            style="width: 70%"
            :percent="parseInt(item.rate * 100)"
            :format="(percent) => formatPercent(percent, item)"
          />
        </div>
      </div>

      <a-empty style="margin-top: 60px" v-else />
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  props: {
    MacTypeCountData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      formatPercent(percent, item) {
        return item.count + "台";
      },
    };
  },
  methods: {},
};
</script>

<style scoped lang="less">
@import "../../light.less";
</style>
